<template>
  <div class="shared-calendar">
    <div class="calendar-header">
      <div class="header-left">
        <div class="add-btn" @click="addNew">新建日程</div>
      </div>
      <div class="header-right">
        <div class="today-btn" @click="selectDate('today')">今天</div>
        <!--        <div class="other-btn">-->
        <!--          <div v-for="(item, index) of timeData" :key="index" :class="{active: flag === index}" @click="tabChange(index)">{{ item }}</div>-->
        <!--        </div>-->
      </div>
    </div>
    <div class="calendar-main">
      <div class="main-left">
        <el-scrollbar>
          <el-calendar v-model="calendarDate" ref="calendar">
            <template #header="{ date }">
              <div class="calendar-box">
                <div class="prev-btn" @click="selectDate('prev-month')"></div>
                <div class="date">{{ date }}</div>
                <div class="next-btn" @click="selectDate('next-month')"></div>
              </div>
            </template>
            <template #date-cell="{ data }">
              <div class="calendar-item">
                <p class="today">{{ data.day.split('-').slice(1)[1] }}</p>
                <p>{{ data.isSelected ? '✔️' : '' }}</p>
                <p class="plan-point">{{isHavePlan(data.day) ? '●' : ''}}</p>
              </div>
            </template>
          </el-calendar>

          <!--          <div class="calendar-info my-info">-->
          <!--            <p class="title">我的日历</p>-->
          <!--            <div class="info-item" v-for="(item, index) of myData" :key="index">{{ item.name }}</div>-->
          <!--          </div>-->

          <!--          <div class="calendar-info">-->
          <!--            <p class="title">未完成</p>-->
          <!--            <div class="info-item" v-for="(item, index) of noFinish" :key="index">{{ item.name }}</div>-->
          <!--          </div>-->
        </el-scrollbar>
      </div>
      <div class="main-right">
        <el-scrollbar>
          <RightPart :date="currentDate" ref="calendarRef" @refresh="getCalendar" />
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {defineComponent, ref} from "vue";
import {CalendarDateType} from "element-plus";
// import RightCalendar from './right-calendar.vue';
import RightPart from './right-part.vue';
import dayjs from 'dayjs';
import {planListAll} from "@/api/plan";

const flag = ref(0)
const timeData = ['日', '周', '月']
const calendarDate = ref(new Date())
const calendar = ref<any>()
const currentDate = computed(() => {
  return `${dayjs(calendarDate.value).format('YYYY-MM-DD')} 00:00:00`
})
const calendarRef = ref<any>()
const calendarList = ref<Record<string, any>[]>([])

const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}

const isHavePlan = (val: string) => {
  const index = calendarList.value.findIndex((item: any) => item.visitDate.slice(0, 10) === val)
  return index !== -1
}

function tabChange(index: number) {
  flag.value = index
}

function addNew() {
  calendarRef.value?.toFill()
}

function getCalendar() {
  planListAll('').then((res: any) => {
    if (+res.code === 200) calendarList.value = res.rows || []
  })
}

getCalendar()
defineComponent({name: 'SharedCalendarIndex'})
</script>

<style scoped lang="scss">
.shared-calendar {
  width: 100%;
  height: 100%;
  padding: 18px 20px;
  background-color: #fff;

  .calendar-header {
    display: flex;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 2px solid rgba(187, 187, 187, 0.5);
  }

  .header-left {
    width: 410px;
  }

  .header-right {
    flex: 1;
    display: flex;
    justify-content: space-between;

    .today-btn {
      width: 88px;
      height: 48px;
      text-align: center;
      line-height: 48px;
      font-size: 16px;
      color: #2E3244;
      background: #F3F4F8;
      border-radius: 8px;
      cursor: pointer;
    }

    .other-btn {
      width: 264px;
      height: 46px;
      display: flex;
      background: #F3F4F8;
      border-radius: 8px;

      div {
        height: 100%;
        width: calc(100% / 3);
        text-align: center;
        line-height: 46px;
        cursor: pointer;

        &.active {
          background: #fff;
          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
          border-radius: 8px;
        }
      }
    }
  }

  .add-btn {
    position: relative;
    width: 165px;
    height: 46px;
    padding-left: 30px;
    line-height: 46px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(296deg, #FF4350 0%, #FF4553 35%, #FFADB3 100%);

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 40px;
      display: inline-block;
      width: 20px;
      height: 20px;
      background: url('./assets/add.png') no-repeat center;
      transform: translateY(-50%);
    }
  }

  .calendar-main {
    width: 100%;
    height: calc(100% - 90px);
    display: flex;

    .main-left {
      width: 410px;

      :deep(.el-calendar-table .el-calendar-day) {
        height: 80px;
        border: none;
      }

      :deep(.el-calendar__header) {
        border-bottom: none;
      }

      :deep(.el-calendar-table td) {
        border: none !important;
        text-align: center;
      }

      :deep(.el-calendar-table td.is-today) {
        background-color: #fff;

        p.today {
          width: 24px;
          height: 24px;
          color: #fff;
          border-radius: 50%;
          background: #2457F4;
        }
      }

      .calendar-item {
        height: 44px;

        p.plan-point {
          color: #e55a0f;
          font-size: 10px;
        }
      }

      :deep(.el-calendar-day) {
        display: flex;
        justify-content: center;
        align-items: center;
      }


      .calendar-box {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .date {
          margin: 0 30px;
          font-weight: 600;
          font-size: 20px;
          color: #2E3244;
        }

        .prev-btn,
        .next-btn {
          width: 22px;
          height: 22px;
          border: 1px solid #eee;
          border-radius: 50%;
          cursor: pointer;
        }

        .prev-btn {
          background: url('./assets/prev.png') no-repeat center;
        }

        .next-btn {
          background: url('./assets/next.png') no-repeat center;
        }
      }

      .calendar-info {
        margin-bottom: 30px;

        .title {
          font-size: 16px;
          color: #999;
        }

        .info-item {
          position: relative;
          margin: 15px 0;
          padding-left: 20px;

          &:before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 4px;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            background: #D6D6D7;
          }
        }

        &.my-info .info-item:before {
          background: #FE6500;
        }
      }
    }

    .main-right {
      flex: 1;
      height: 100%;
    }
  }
}
</style>
